import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from '../src/base/axios';
import 'bootstrap/dist/css/bootstrap.css';
import MessageBox from '../src/components/MessageBox';
import MessageInput from '../src/components/MessageInput';
import { Provider } from '../src/base/context'

class App extends Component {
    state = {
        messageList: [],
        total: 0
    }
    async componentDidMount() {
        let messageList = await axios.get('/user.json');
        this.setState({ messageList });
        console.log(messageList);
    }
    addMessage = message => {
        let m = {
            avatar: 'https://user-gold-cdn.xitu.io/2018/11/27/16754d5464eae676?imageView2/1/w/100/h/100/q/85/format/webp/interlace/1',
            message,
            time: Date.now()
        }
        // react 每次更新状态 最好产生一个新的状态来覆盖掉老的状态
        this.setState({ messageList: [...this.state.messageList, m] });
    }
    add = () => {
        this.setState({ total: this.state.total + 1 });
    }
    render() {
        return (<Provider value = {{add: this.add}}>
            <div className="container">
                <div className="panel panel-primary">
                    <div className="panel-heading">留言信息</div>
                    <div className="panel-body">
                        <MessageBox messageList={this.state.messageList}></MessageBox>
                    </div>
                    <div className="panel-footer">
                        <MessageInput addMessage={this.addMessage}></MessageInput>
                    </div>
                </div>
                <h2 className="text-center">总点赞数 {this.state.total}</h2>
            </div>
        </Provider>);
    }
}

ReactDOM.render(<App></App>, window.root)